<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tencent 腾讯</title>
    <style>
        * {
            /*请内外边距*/
            margin: 0;
            padding: 0;
        }
        #head {
            height: 1080px;
        }
        video{
            position: absolute;
            top:0;
            left:0;
        }
          .headfont{
              /*   头部   字体颜色大小*/
        color: white;
       font-size: 12px;
              font-family: "微软雅黑";
              text-align: center;
              text-decoration: none;
       }
        h1 {
            float:left;
            color: white;
            font-size:20px;
            font-style: italic;
            margin-top: 25px;
            margin-left: 200px;
            font-family: "微软雅黑";
        }
        #choose ul li.headfont {
            float: left;
            list-style-type: none;
            margin: 20px;
            border:2px solid red;

        }
        .clear:after {
        /*    请浮动*/
            content:'' ;
            display:block;
            clear: both;
        }
        #choose {
            position: relative;
            height: 80px;
            border:1px solid red;
        }


        #choose ul#jianjie {
            padding: 0px;
           margin-left: 400px;
            margin-top: 13px;

        }
        #choose #jianjie li ul {
            /*display: none;*/
        }
        #choose ul#jianjie li:hover ul{

            display: block;
        }
        #jianjie1 {
            border: 2px solid red;
        }
        #jianjie1 li a {
            color: white;
        }

    </style>
</head>
<body>
<!--头部区域-->
<div id="head">
    <video src="https://www.tencent.com/video/index-video.mp4" autoplay muted loop style="z-index: -990"></video>
    <div id="choose">
        <h1>Tencennt腾讯</h1>
        <ul id="jianjie">
            <li class="headfont clear">简介
                <ul id="jianjie1">
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">远景及使命</a></li>
                    <li><a href="#">发展历程</a></li>
                    <li><a href="#">业务构架</a></li>
                    <li><a href="#">管理团队</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">办公地点</a></li>
                </ul>
            </li>
            <li class="headfont clear">业务
                <ul id="yewu">
                    <li><a href="#">面向企业</a></li>
                    <li><a href="#">面向用户</a></li>
                    <li><a href="#">创新科技</a></li>

                </ul>

            </li>
            <li class="headfont clear">员工
                <ul id="yuangong">
                    <li><a href="#">人才发展</a></li>
                    <li><a href="#">腾讯学院</a></li>
                    <li><a href="#">工作环境</a></li>

                </ul>
            </li>
            <li class="headfont clear">企业责任
                <ul id="zeren">
                    <li><a href="#">践行承诺</a></li>
                    <li><a href="#">支持善举</a></li>
                    <li><a href="#">鼓励创新</a></li>
                    <li><a href="#">企业社会责任报告</a></li>

                </ul>
            </li>
            <li class="headfont clear">投资者
                <ul id="touzi">
                    <li><a href="#">财务新闻</a></li>
                    <li><a href="#">公告及财务报告</a></li>
                    <li><a href="#">业绩电话会及路演</a></li>
                    <li><a href="#">投资者工具包</a></li>

                </ul>
            </li>
            <li class="headfont clear">媒体</li>
            <li class="headfont clear"><a href="#" class="headfont">简 /</a></li>
            <li class="headfont clear"><a href="#" class="headfont">繁 /</a></li>
            <li class="headfont clear"><a href="#" class="headfont">EN</a></li>
        </ul>
    </div>
</div>

</body>
</html>